import PlayName from '@/component/PlayName'
import { Button, Input, Space } from 'antd'
import { useState } from 'react'
import { useSelector } from 'react-redux'
import { Socket } from 'socket.io-client'

export default function ChatContainer({ socketRef }: { socketRef: React.MutableRefObject<Socket | null> }) {
    const [chatText, setChatText] = useState("")
    const {players,chatTextArr} = useSelector(({ main }: any) => {
        return main
    })
    function onChange(e: any) {
        setChatText(e.target.value)
    }
    function sendChatText() {
        if (chatText) {
            socketRef.current?.emit('sendChatText', chatText)
            setChatText('')
        }
    }

    return (
        <div style={{ marginBottom: 4, width: 200, height: 800, backgroundColor: "white", overflow: 'auto', color: 'black' }}>
            <Space style={{ margin: 5, position: "sticky" }}>
                <Input value={chatText} onChange={onChange} />
                <Button onClick={sendChatText}>发送</Button>
            </Space>
            {
                chatTextArr.map(({ chatText, sendId, sendTime }:any) => {
                    const player=players.find((player:any)=>player.id===sendId)
                    return <div style={{ margin: 5 }} key={sendTime} title={new Date(sendTime).toLocaleString()}>
                        <PlayName {...player} /> ：{chatText}
                    </div>
                })
            }
        </div>
    )
}
